<template> 
    <div ref="lotMenu" class="maskLayer" @click="closeTab()">
        <div class="tabBox bg-c-wh">
            <div class="triangle"></div>
            <div class="flex-box flex-ac bor-b" @click="next('trend')">
                <div class="iconSize-1 mune_zst mar-r-5"></div>
                <div>历史走势</div>
            </div>
            <div class="flex-box flex-ac bor-b" @click="next('rule')">
                <div class="iconSize-1 mune_wfjs mar-r-5"></div>
                <div>玩法介绍</div>
            </div>
            <div class="flex-box flex-ac bor-b" @click="next('lotteryHistory')">
                <div class="iconSize-1 mune_lskj mar-r-5"></div>
                <div>历史开奖</div>
            </div>
            <div class="flex-box flex-ac" @click="next('theMyRecord')">
                <div class="iconSize-1 mune_tzjl mar-r-5"></div>
                <div>投注记录</div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { lotSelTitle, lotSelObj } from '../../common/js/data'
export default {
    data () {
        return { 
            index : 0,
            lotSelTitle : lotSelTitle,
            lotSelObj : lotSelObj
        }
    }, 
    methods : {
        next (index) {
            const {lotType} = this.$store.state
            if(index == 'lotteryHistory'){// 历史开奖
                let data = {
                    ename : lotType,
                    type : this.lotSelTitle[lotType]
                }
                this.$router.push({
                    path: '/lotteryHistory',
                    query: {
                        id: data
                    }
                })
            }else if(index == 'trend'){// 历史走势
                this.$router.push('/'+ this.lotSelObj[lotType] +'Trend')
            }else if(index == 'rule'){// 玩法介绍
                this.$router.push('/'+ this.lotSelObj[lotType] +'Rule')
            }else{// 投注记录
                 this.$router.push('/'+index)
            }
        },
        closeTab () { 
            this.$store.state.lotPlayMenu = !this.$store.state.lotPlayMenu
        },
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .maskLayer
        position : fixed
        top : 0
        bottom : 0
        width : 100%
        z-index : 100
        background : rgba(0, 0, 0, 0.6)
    .tabBox
        position : absolute
        top : 2.75rem
        right : .25rem
        line-height : 2.5rem
        border-radius : .5rem .5rem
        padding : 0 1rem
    .triangle
        position : relative
        top : -.25rem
        right : -5rem
        width : 0
        border-left : 5px solid transparent
        border-right : 5px solid transparent
        border-bottom : 5px solid white
        border-top : 0
    .bor-b
        border-bottom : 1px solid #ccc
    .mune_zst
        background-image : url('../../common/image/mune_zst.png')
    .mune_wfjs
        background-image : url('../../common/image/mune_wfjs.png')
    .mune_lskj
        background-image : url('../../common/image/mune_lskj.png')
    .mune_tzjl
        background-image : url('../../common/image/mune_tzjl.png')
</style>